<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账户管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }
        .active {
            background-color: green;
        }
        .inactive {
            background-color: red;
        }
        .btn {
            padding: 8px 12px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            margin: 0 5px;
        }
        .btn-delete {
            background-color: #ff4d4d;
            color: white;
        }
        .btn-toggle {
            background-color: #4CAF50;
            color: white;
        }
        .btn-edit {
            background-color: #2196F3;
            color: white;
        }
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
        .pagination select, .pagination button {
            padding: 8px 12px;
            margin: 0 5px;
            cursor: pointer;
        }
        .pagination-info {
            margin: 0 10px;
        }
    </style>
</head>
<body>
<h1>管理账户页面</h1>

<table>
    <thead>
    <tr>
        <th><input type="checkbox" id="selectAll" onclick="selectAll(this)"></th>
        <th>用户名</th>
        <th>电话</th>
        <th>邮箱</th>
        <th>更新时间</th>
        <th>性别</th>
        <th>地址</th>
        <th>职业</th>
        <th>年龄</th>
        <th>头像</th>
        <th>状态</th>
        <th>
            <button class="btn btn-delete" onclick="deleteSelectedUsers()">批量删除</button>
        </th>
    </tr>
    </thead>
    <tbody id="userTable">
    </tbody>
</table>

<div class="pagination">
    <div>
        <label for="pageSize">每页显示条数：</label>
        <select id="pageSize" onchange="loadUsers(1)">
            <option value="5">5</option>
            <option value="10" selected>10</option>
            <option value="15">15</option>
        </select>
    </div>
    <button onclick="previousPage()">上一页</button>
    <span id="paginationInfo" class="pagination-info"></span>
    <button onclick="nextPage()">下一页</button>
</div>

<script>
    let currentPage = 1;
    let totalPage = 1;
    const token = localStorage.getItem('adminToken');

    function loadUsers(page) {
        const pageSize = document.getElementById('pageSize').value;
        fetch(`http://localhost:8080/admin/getAllUserInfo?page=${page}&pagesize=${pageSize}`, {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        })
            .then(response => response.json())
            .then(data => {
                const userTable = document.getElementById('userTable');
                userTable.innerHTML = '';
                data.data.rows.forEach(user => {
                    const row = userTable.insertRow();
                    row.innerHTML = `
                    <td><input type="checkbox" value="${user.userId}"></td>
                    <td>${user.userName}</td>
                    <td>${user.phoneNumber}</td>
                    <td>${user.email}</td>
                    <td>${new Date(user.updateTime).toLocaleString()}</td>
                    <td>${user.sex}</td>
                    <td>${user.address}</td>
                    <td>${user.occupation}</td>
                    <td>${user.age}</td>
                    <td><img src="${user.avatar}" alt="avatar" width="50"></td>
                    <td>
                        <span class="indicator ${user.status === 1 ? 'active' : 'inactive'}"></span>
                        ${user.status === 1 ? '正常' : '已冻结'}
                    </td>
                    <td>
                        <button class="btn btn-toggle" onclick="toggleStatus(${user.userId}, ${user.status})">${user.status === 1 ? '冻结' : '启用'}</button>
                        <button class="btn btn-delete" onclick="deleteUser(${user.userId})">删除</button>
                        <button class="btn btn-edit" onclick="editUser(${user.userId})">修改信息</button>
                    </td>
                `;
                });
                totalPage = Math.ceil(data.data.total / pageSize);
                currentPage = page;
                document.getElementById('paginationInfo').innerText = `第 ${currentPage} 页，共 ${totalPage} 页`;
            });
    }

    function editUser(userId) {
        window.location.href = `editUser.html?userId=${userId}`;
    }

    function selectAll(checkbox) {
        const checkboxes = document.querySelectorAll('#userTable input[type="checkbox"]');
        checkboxes.forEach(cb => cb.checked = checkbox.checked);
    }

    function deleteUser(userId) {
        if (window.confirm("确定要删除这个用户吗？")) {
            fetch('http://localhost:8080/admin/deleteUser', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify([userId]) // 直接传递数组
            }).then(() => loadUsers(currentPage));
        }
    }

    function deleteSelectedUsers() {
        const selectedIds = Array.from(document.querySelectorAll('#userTable input[type="checkbox"]:checked')).map(cb => cb.value);
        if (selectedIds.length === 0) {
            alert("请选择要删除的用户");
            return;
        }

        if (window.confirm("确定要删除选中的用户吗？")) {
            fetch('http://localhost:8080/admin/deleteUser', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify(selectedIds) // 直接传递数组
            }).then(() => loadUsers(currentPage));
        }
    }

    function toggleStatus(userId, currentStatus) {
        const newStatus = currentStatus === 1 ? 0 : 1;
        fetch(`http://localhost:8080/admin/toggleUserStatus?userId=${userId}&status=${newStatus}`, {
            method: 'PUT',
            headers: {
                'Authorization': `Bearer ${token}`
            }
        }).then(() => loadUsers(currentPage));
    }

    function previousPage() {
        if (currentPage > 1) {
            loadUsers(currentPage - 1);
        }
    }

    function nextPage() {
        if (currentPage < totalPage) {
            loadUsers(currentPage + 1);
        }
    }

    window.onload = () => loadUsers(currentPage);
</script>
</body>
</html>
